<template>
    <div class="container">

        <van-nav-bar @click-left="onClickRight">
            <template #left>
                <van-icon name="arrow-left" size="23" color="#fff" />
            </template>

        </van-nav-bar>
        <!-- <div class="user1">
            <img class="user_img" src="@/assets/user.png" />
        </div> -->


        <div class="pool">
            <div><img class="pool_img" src="@/assets/pool.gif"/></div>
            <div class="pool_txt">
                <div class="p1">

                    <div class="p1_2">{{ rouse }}</div>
                    <div class="p1_1">{{$t('m.pool')}}(Rouse)</div>
                </div>
                <div class="p1">

                    <div class="p1_2" style="color: #EE822F;">{{ wu }}</div>
                    <div class="p1_1" > {{$t('m.circulation')}}(Wu)</div>
                </div>
                <div class="p1">

                    <div class="p1_2" style="color: #2fee7b;">{{ wu_price }}</div>
                    <div class="p1_1">{{$t('m.price')}}(Wu)</div>
                </div>
            </div>
        </div>

        <div class="account">
            <div class="acc">{{$t('m.account')}}</div>
            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.invest')}}</div>
                    <div><span  class="num">{{invest}}</span> BNB</div>
                </div>

            </div>

            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.profit')}}</div>
                    <div><span  class="num">{{profit}}</span> BNB</div>
                </div>

            </div>

            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.cash')}}</div>
                    <div><span  class="num">{{amount}}</span> Wu</div>
                </div>

            </div>

            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.release')}}</div>
                    <div><span  class="num">{{ pedding_wu }}</span> Wu</div>
                </div>

            </div>

            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.max')}}</div>
                    <div><span  class="num">{{ maxMint }}</span> Rouse</div>
                </div>

            </div>

            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.team_invest')}}</div>
                    <div><span  class="num">{{team_invest}}</span> BNB </div>
                </div>

            </div>

        </div>

        <div class="account" style="margin-top: 30px;">
            <div class="acc" style="margin-bottom: 20px;">{{$t('m.nft')}}</div>

            <div class="card">
                <img class="card_img" src="@/assets/xf.png" v-if="card1"  />
                <img class="card_img gray" src="@/assets/xf.png" v-else  />
                <img class="card_img" src="@/assets/cs.png" v-if="card2"  />
                <img class="card_img gray" src="@/assets/cs.png" v-else  />
            </div>
        </div>


        <div class="account">
            <div class="acc" style="margin-top: 30px;">{{$t('m.myinvite')}}</div>
            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.invite_num')}}</div>
                    <div><span  class="num">{{invite_num}}</span></div>
                </div>

            </div>
            <div class="account1">
                <div class="account_1">
                    <div>{{$t('m.tjz')}}</div>
                    <div><span  class="num">{{formatAddr(address)}}</span></div>
                </div>

            </div>

            <div class="account1" @click="showInvite">
                <div class="account_1">
                    <div>{{$t('m.ztuser')}}</div>
                    <div><span  >{{$t('m.view')}}</span></div>
                </div>

            </div>

        </div>

     <!--   <div v-if="show">
            <div v-if="record.length>0" style="padding-bottom: 100px;">
                <div class="xq1" v-for="(item,index) in record" :key="index">
                    <div>{{ formatAddr(item.address) }}</div>
                    <div>{{item.team_invest}}</div>
                </div>
            </div>

            <div style="display:flex;justify-content: center; font-size: 10px;" class="xq1" v-else>
                {{$t('m.nouser')}}
            </div>
        </div>-->

        <div class="recordlist" v-if="show">
            <div v-if="record.length>0" style="padding-bottom: 100px;">
                <div class="xq1" v-for="(item,index) in record" :key="index">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item :name="index">
                            <template #title>
                                <div>{{ formatAddr(item.address) }}</div>
                            </template>
                            <template #value>
                                <div>{{item.team_invest}}</div>
                            </template>


                                    <div v-if="record.length>0" style="padding-bottom: 10px;">
                                        <div class="xq1" v-for="(item,index) in record" :key="index">
                                            <van-collapse v-model="activeNames">
                                                <van-collapse-item :name="index">
                                                    <template #title>
                                                        <div>{{ formatAddr(item.address) }}</div>
                                                    </template>
                                                    <template #value>
                                                        <div>{{item.team_invest}}</div>
                                                    </template>
                                                    代码是写出来给人看的，附带能在机器上运行。
                                                </van-collapse-item>

                                            </van-collapse>

                                        </div>
                                    </div>

                                    <div style="display:flex;justify-content: center; font-size: 10px;" class="xq1" v-else>
                                        {{$t('m.nouser')}}
                                    </div>


                        </van-collapse-item>

                    </van-collapse>

                </div>
            </div>

            <div style="display:flex;justify-content: center; font-size: 10px;" class="xq1" v-else>
                {{$t('m.nouser')}}
            </div>
        </div>










    </div>
</template>

<script>
    import { getInviteRecord } from '@/util/api';
    import detectEthereumProvider from '@metamask/detect-provider'
    import Web3 from 'web3'
    import rouseAbi from '@/abi_rouse'
    import wuAbi from '@/abi_wu'
    export default {
        name: 'UserC',
        data() {
            return {
                activeNames:['1'],
                show:false,
                maxMint:0,
                invite_num:0,
                invest:0,
                address:"---",
                team_invest:0,
                pedding_wu:0,
                release_time:'...',
                wu_price:'...',
                card1:0,
                card2:0,
                rouse:0,
                wu:0,
                profit:0,
                amount:0,
                record:[]
            };
        },
        computed:{
            formatAddr() {
                return addr => {
                    let str1 = addr.substring(0, 6)
                    let str2 = addr.substring(36)
                    return str1 + "*****" + str2
                }
            }
        },
        created() {

            this.getRecord()
            this.getInvite()

        },
        methods: {
            showInvite(){
                this.show=!this.show
            },
            getRecord(){

             //   let web3 = new Web3(window.web3.currentProvider)
                const provider = detectEthereumProvider();

                let web3;
                if (provider) {
                    console.log('Ethereum successfully detected!')
                    web3=new Web3(window.ethereum) ;
                } else {
                    // if the provider is not detected, detectEthereumProvider resolves to null
                    console.error('Please install MetaMask!')
                }


                let data = {
                    address: web3.utils.toChecksumAddress('0x289B390e9901Be273e11e9De8a427cBd898b4624')
                  //  address: web3.utils.toChecksumAddress(this.$store.state.address)
                }

                getInviteRecord(data).then((res) => {
                    this.record=res.data.data
                    //this.invite_num=this.record.length
                }).catch((err) => {
                    console.log(err)
                })
            },

            async getInvite() {
                try{
                    let dayBlock=600
                    const provider = detectEthereumProvider();

                    let web3;
                    if (provider) {
                        console.log('Ethereum successfully detected!')
                        web3=new Web3(window.ethereum) ;
                    } else {
                        // if the provider is not detected, detectEthereumProvider resolves to null
                        console.error('Please install MetaMask!')
                    }


                    var contractId = this.$store.state.rouse_contract;
                    var tokenContract = new web3.eth.Contract(rouseAbi, contractId);


                     let user =await tokenContract.methods.topUser(this.$store.state.address).call();
                 //   let user =await tokenContract.methods.topUser('0x289B390e9901Be273e11e9De8a427cBd898b4624').call();
                    this.address=user


                    let invite_num =await tokenContract.methods.userShareLevel(this.$store.state.address).call();
                    this.invite_num=invite_num

                    let invest =await tokenContract.methods.userInvestBNBAmount(this.$store.state.address).call();
                    this.invest=web3.utils.fromWei(invest, 'ether')

                    let team_invest =await tokenContract.methods.teamTotalInvestValue(this.$store.state.address).call();
                    this.team_invest=parseFloat(web3.utils.fromWei(team_invest, 'ether')).toFixed(2)

                    let aPool=await tokenContract.methods.aPool().call();
                    let bPool=await tokenContract.methods.bPool().call();
                    this.rouse=parseFloat(web3.utils.fromWei(aPool, 'ether')).toFixed(2)
                    this.wu=parseFloat(web3.utils.fromWei(bPool, 'ether')).toFixed(2)
                    if(bPool<=0){
                        this.wu_price="---"
                    }else{
                        this.wu_price=parseFloat(aPool/bPool).toFixed(2)
                    }

                    let card =await tokenContract.methods.getCard(this.$store.state.address).call();
                    console.log(card.big)
                    if(card.small){
                        this.card1=1
                    }
                    if(card.big){
                        this.card2=1
                    }




                    let profit =await tokenContract.methods.userClaimRewardBNBValue(this.$store.state.address).call();

                    this.profit=parseFloat(web3.utils.fromWei(profit, 'ether')).toFixed(5)

                    var wuContract = new web3.eth.Contract(wuAbi, this.$store.state.wu_contract);
                    let info =await wuContract.methods.geInfoWu(this.$store.state.address).call();
                    console.log(info)
                    this.pedding_wu=parseFloat(web3.utils.fromWei(info.wait, 'ether')-web3.utils.fromWei(info.recive, 'ether')).toFixed(2)
                    this.release_time=info.time
                    let number=await web3.eth.getBlockNumber();
                    console.log(number)
                    let day=parseInt((number-info.time)/dayBlock);
                    console.log(day)
                    let amount=parseFloat((this.pedding_wu*25/1000)*day).toFixed(2);
                    console.log(amount)
                    //let recive=parseFloat(web3.utils.fromWei(info.recive, 'ether')).toFixed(2);
                    // console.log(amount,this.pedding_wu,recive)
                    // if(amount>(this.pedding_wu-recive)){
                    //     amount=this.pedding_wu;
                    // }
                    this.amount=parseFloat(amount).toFixed(2);

                    let incomeTime=await tokenContract.methods.incomeTime().call();
                    let rouseAward=await tokenContract.methods.getRouseAward(this.$store.state.address).call();
                    console.log(web3.utils.fromWei(rouseAward.a, 'ether'))
                    console.log(web3.utils.fromWei(rouseAward.b, 'ether'))

                    let month = (number - incomeTime) / (dayBlock * 30)
                    if (month > 5) {
                        month = 10;
                    }else{
                        month=parseInt(month)*2;
                    }
                    console.log(month)
                    this.maxMint = parseFloat(((web3.utils.fromWei(rouseAward.a, 'ether')-web3.utils.fromWei(rouseAward.b, 'ether')) * month) / 10).toFixed(2);
                }catch(e){
                    console.log(e.message)
                }

            },
            onClickRight() {
                console.log("router");
                this.$router.push('/nav')
            },
        }

    }
</script>

<style>
    .van-cell {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 16px;
        overflow: hidden;
        color: #fff;
        font-size: 14px;
        line-height: 24px;
        background-color: #201f1f;
    }

    .van-collapse-item__content {
        padding: 12px 16px;
        color: #969799;
        font-size: 14px;
        line-height: 1.5;
        background-color: #201f1f;
    }
    van-cell--clickable:active {
        background-color: #201f1f !important;
    }
</style>
<style scoped>
    .recordlist {
        margin:3px 20px 3px 20px;
    }
    .pool{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pool_img{
        width: 200px;
    }
    .pool_txt{
        display: flex;
        flex-direction: column;
        margin-right: 80px;
        font-size: 13px;
    }
    .p1{
        margin-bottom: 3px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .p1_1{
        width: 100px;

    }
    .p1_2{
        font-size: 20px;
        color: #FFC000;
        margin-right: 30px;
    }
    .account{
        padding: 0 30px;
    }
    .acc{
        font-size: 20px;
        color: #fff;
        font-weight: bold;

    }
    .num{
        color: #FFC000;
        font-size: 20px;
    }
    .account1{
        padding: 10px 0;
        border-bottom: #201f1f 1px solid;
    }
    .account_1{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

    }
    .card{
        display: flex;
        justify-content: space-between;

    }
    .card_img{
        width: 160px;
        height: 200px;
        border-radius: 10px;
    }
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }
    .xq1{
        padding: 5px 0px;
        background-color: #201f1f;
        border-radius: 5px;
        margin-bottom: 1px;
        margin:5px;

    }
    .van-hairline--bottom::after{
        border-bottom-width:0;
    }
    .container {
        background-color: #000;
        /* padding: 0 30px; */

        padding-bottom: 100px;
        min-height: 1500px;
        letter-spacing: 0.00938em;
        font-size: 15px;
        color:#B3B3B3;


    }

    .van-nav-bar {
        background-color: #000;
    }

    .user1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user_img {
        width: 200px;
        margin-top: -20px;
    }

    .user2 {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }

    .user22 {
        margin-top: 30px;
    }

    .u {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 0.5;

    }

    .uu {
        border-right: #B3B3B3;
        border-right-style: dotted;

    }

    .u1 {
        color: #FFC000;
        font-size: 23px;

    }

    .addr {
        font-size: 15px;
        text-align: center;
        padding: 10px 0;
        margin: 10px 0;
        background-color: #201f1f;
        border-radius: 10px;
    }</style>